<template>
    <div class="UpdateOrg-container">
        <BaseBreadcrumb useConvert>
            <a-card>
                <a-tabs :activeKey="activeKey" @tabClick="handleTabClick">
                    <a-tab-pane
                        v-for="item in tabsList"
                        :key="item.key"
                        :tab="item.label"
                        :disabled="disabledJob && item.key === 'Job'"
                    >
                        <div class="content-wrapper" v-if="item.key === 'Basic'">
                            <title-name title="组织基本信息"></title-name>
                            <OrgBasicInfo
                                ref="OrgBasicInfo"
                                :disabled="disabledAll"
                                :parentId="$route.query.parentId"
                                :recordId.sync="recordId"
                                @orgTypeChanged="handleOrgTypeChanged"
                            />
                        </div>
                        <div class="content-wrapper" v-if="item.key === 'Job'">
                            <title-name title="岗位信息"></title-name>
                            <PostManage :orgId="recordId" :disabled="disabledAll" />
                        </div>
                    </a-tab-pane>
                </a-tabs>
                <div class="btns-wrapper">
                    <a-button
                        type="primary"
                        :loading="loading.isNext"
                        @click="handleNext"
                        v-show="activeKey !== tabsList[tabsList.length - 1].key"
                        :disabled="disabledJob"
                        >下一步</a-button
                    >
                </div>
            </a-card>
            <div class="tool-btns page-btn-right-top">
                <a-button :loading="loading.isSubmit" v-if="pageType !== 'look'" type="primary" @click="handleSubmit"
                    >提交</a-button
                >
                <a-button class="ml12" type="primary" @click="handleClose">关闭</a-button>
            </div>
        </BaseBreadcrumb>
    </div>
</template>

<script>
import OrgBasicInfo from './OrgBasicInfo.vue'
import PostManage from './postManage'
const tabsList = [
    {
        label: '基本信息',
        key: 'Basic'
    },
    {
        label: '岗位信息',
        key: 'Job'
    }
]
export default {
    components: {
        OrgBasicInfo,
        PostManage
    },
    data() {
        return {
            recordId: '',
            disabledJob: false,
            activeKey: tabsList[0].key,
            tabsList,
            loading: {
                isNext: false,
                isSubmit: false
            }
        }
    },
    computed: {
        pageType() {
            return this.$route.query.pageType || 'add'
        },
        disabledAll() {
            return this.pageType === 'look'
        }
    },
    created() {
        this.recordId = this.$route.query.id
    },
    methods: {
        handleOrgTypeChanged(val) {
            // 只有组织类型为部门('2')时，才有岗位信息
            if (val !== '2') {
                this.disabledJob = true
            } else {
                this.disabledJob = false
            }
        },
        handleClose() {
            this.$close()
        },
        handleSubmit() {
            if (this.activeKey === 'Job') {
                this.$message.success('提交成功')
                this.handleClose()
                return
            }
            if (this.loading.isSubmit) return
            this.loading.isSubmit = true
            const submitPromise = new Promise((resolve, reject) => {
                this.basicInfoValidator(resolve, reject)
            })
            submitPromise
                .then(() => {
                    this.loading.isSubmit = false
                })
                .catch(() => {
                    this.loading.isSubmit = false
                })
        },
        handleNext() {
            if (this.loading.isNext) return
            this.loading.isNext = true
            this.validBeforeNext(this.activeKey)
                .then(() => {
                    this.loading.isNext = false
                    const index = this.tabsList.findIndex((item) => item.key === this.activeKey)
                    if (this.tabsList[index + 1]) {
                        this.activeKey = this.tabsList[index + 1].key
                    } else {
                        this.activeKey = this.tabsList[0].key
                    }
                })
                .catch(() => {
                    this.loading.isNext = false
                })
        },
        basicInfoValidator(...args) {
            this.$refs.OrgBasicInfo[0].handleSubmit(...args)
        },
        /**
         * 点击下一步，跳转之前进行的校验，返回一个Promise
         */
        validBeforeNext(key) {
            return new Promise((resolve, reject) => {
                // 查看页面直接校验通过
                if (this.pageType === 'look') {
                    resolve()
                    return
                }
                // 在这里对需要校验的tab页，添加处理函数
                const validMap = {
                    Basic: this.basicInfoValidator
                }
                if (validMap[key]) {
                    validMap[key](resolve, reject)
                } else {
                    resolve()
                }
            })
        },
        handleTabClick(key) {
            if (this.loading.isNext) return
            this.loading.isNext = true
            this.validBeforeNext(this.activeKey)
                .then(() => {
                    this.activeKey = key
                    this.loading.isNext = false
                })
                .catch(() => {
                    this.loading.isNext = false
                })
        }
    }
}
</script>

<style lang="less" scoped>
.UpdateOrg-container {
    .btns-wrapper {
        display: flex;
        justify-content: flex-end;
    }
}
</style>